{% extends "sitebase.html" %}

{% block title %}
Compare Buildings
{% endblock %}

{% block menu_4 %}
class="active"
{% endblock %}

{% block header_title %}
Compare Buildings
{% endblock %}

{% block extra_scriptsCSS_imports %}
<script type="text/javascript" src="/site-media/campenportJS/smap/query.js"></script>
{% endblock %}


{% block extra_css_inline %}

			.comparisongraph {
				margin-bottom: 5px;
        		-webkit-border-radius: 10px 10px 10px 10px;
           			-moz-border-radius: 10px 10px 10px 10px;
                		border-radius: 10px 10px 10px 10px;
        		-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
           			-moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
                		box-shadow: 0 1px 2px rgba(0,0,0,.15);
				padding-top: 5px;
				padding-left: 5px;
      		}

{% endblock %}

{% block header_subtitle %}
Bar height and width represent square footage and kWh per sqft respectively.
{% endblock %}

{% block content_inside %}
<div class="row">
	<div class="span16">
<div style="text-align:center">
<div style="display:inline-block;">
<div style="float:left;">&nbsp;&nbsp; Expand Height &nbsp;</div><div id="slider2" style="width:650px;float:left;"></div><div style="float:left;">&nbsp;&nbsp;&nbsp;Compress Height</div><br></div></div>
<div style="float:left;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; (see fewer buildings) </div><div style="float:right;">(see more buildings) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
<div style="text-align:center"><br>
Sort By: <select id="sortselect" class="select">
  <option value="kWhperSqFt">kWh/SqFt</option>
  <option value="Reading">kWh</option>
  <option value="SQFT">SqFt</option>
  <option value="FullName">Building Name</option>
</select> <h3 style="display:inline;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" rel="popover" title="How is this data computed?" data-placement="below" data-content="kWh/SqFt is calculated by taking the kWh usage of a building in one day and dividing it by the square footage of the building. This standardizes comparisons in a way by negating the effect of building size in comparison of energy usage. In this graph format, comparing the widths of bars gives an idea of which buildings use the most energy." style="color:#000000;">How is this data computed?</a></h3>
</div>
<p><br></p>
<div id="bargraph"></div>
	</div>
</div>


{% endblock %}

{% block random_extras %}
<script type="text/javascript">

var get_these_queries = [];
var hscaleFactor = 3030;
var vscaleFactor = 1000;
var sorttype = 'kWhperSqFt';
$(document).ready(function() {
	$('#bargraph').hide();

/*	$( "#slider" ).slider({"value": 3030, "min": 2030, "max": 4030, "step": 250, change: function(event, ui) {
		hscaleFactor = ui.value;
		$("#bargraph").hide();
		drawBars(sortTesting(djangoGenDsqfts, sorttype), 0);
	}});*/

	$( "#slider2" ).slider({"value": 1000, "min": 500, "max": 4200, "step": 100, change: function(event, ui) {
		vscaleFactor = ui.value;
		$("#bargraph").hide();
		drawBars(sortTesting(djangoGenDsqfts, sorttype), 0);
	}});
	runReqOne();
});

//ui control change handlers
$("#hscalingfactor").change(function() {
	hscaleFactor = $("#hscalingfactor").val();
	$("#bargraph").hide();
	drawBars(sortTesting(djangoGenDsqfts, sorttype), 0);
});

$("#slider").change(function() {
	hscaleFactor = $("#slider").val();
	$("#bargraph").hide();
	drawBars(sortTesting(djangoGenDsqfts, sorttype), 0);
});

$("#vscalingfactor").change(function() {
	vscaleFactor = $("#vscalingfactor").val();
	$("#bargraph").hide();
	drawBars(sortTesting(djangoGenDsqfts, sorttype), 0);
});

$("#sortselect").change(function() {
	sorttype = $("#sortselect").val();
	$("#bargraph").hide();
	drawBars(sortTesting(djangoGenDsqfts, sorttype), 0);
});
//end ui control change handlers



var djangoGenDsqfts = {
{% for building in buildings|dictsort:"longname" %} "{{ building.kWhqueryid }}": {'SQFT': {{ building.stats_sqft }}, 'UUID': "", 'Reading': 0, 'FullName': "{{ building.longname }}", 'url': "/buildings/{{ building.shortname }}", "kWhperSqFt": 0 }, 
{% endfor %}
};

var combinedUUIDqueryString = "";
var counterTens = 0;
var setsOfTen = [];
var collectedData = [];


function runReqOne() {
	
	httpGetTags(function(respo){
		for (ind = 0; ind < respo.length; ind++) {
			try{
				djangoGenDsqfts[respo[ind]["Metadata"]["Location"]["Building"]]['UUID'] = respo[ind]["uuid"];
			}
			catch(e){
				console.log(respo[ind]["uuid"]);
			}
		}
		for (building in djangoGenDsqfts){
				if (djangoGenDsqfts[building]['UUID']==""){
					delete djangoGenDsqfts[building]; //removes buildings that don't have kWh data
				}
				else {
					if (counterTens<10){  //this stuff handles ARDs limit of 10 UUIDs per query?
						combinedUUIDqueryString += " uuid = '" + djangoGenDsqfts[building]['UUID'] + "' or ";
						counterTens++;
					}
					else {
						setsOfTen.push(combinedUUIDqueryString.slice(0, combinedUUIDqueryString.length-4));
						combinedUUIDqueryString = "";
						counterTens = 0;
						combinedUUIDqueryString += " uuid = '" + djangoGenDsqfts[building]['UUID'] + "' or ";
						counterTens++;
						}
				}
		}
		if (counterTens != 10){
			setsOfTen.push(combinedUUIDqueryString.slice(0, combinedUUIDqueryString.length-4));
		}
			
		runReqTwo(setsOfTen);
	}, "select * where Metadata/Extra/Operator = 'daily meter usage'");
}


function runReqTwo(querystring) {
	for (x = 0; x < querystring.length; x++){
	httpGetLatestData(function(resp, x, endat){
		for (z = 0; z< resp.length; z++){
			collectedData[resp[z]['uuid']] = resp[z]['Readings'][0][1];
			}

			if (x == (endat-1)){
				mapToDjangoData(collectedData);
			}
		}, querystring[x], x, querystring.length);
	}
}

function mapToDjangoData(kWhData) {
	for (building in djangoGenDsqfts){
		djangoGenDsqfts[building]['Reading'] = kWhData[djangoGenDsqfts[building]['UUID']];
		djangoGenDsqfts[building]['kWhperSqFt'] = djangoGenDsqfts[building]['Reading']/djangoGenDsqfts[building]['SQFT'];
	}
	drawBars(sortTesting(djangoGenDsqfts, sorttype), 1);
}

function drawBars(djangoGenDsqfts, firstLoad) {
	var innerHTMLstring = "";
	if (firstLoad==1){
		hscaleFactor = 3030;
	}
	var colorCounter = 0;
	var background;
	var gradcolor1;
	var gradcolor2;
	var max = 0;
	for (building in djangoGenDsqfts){
		if(djangoGenDsqfts[building]['kWhperSqFt']>max){
			max = djangoGenDsqfts[building]['kWhperSqFt'];
		}
	}
	hscaleFactor = 935/max;
	for (building in djangoGenDsqfts){
		kwhPerSqft = djangoGenDsqfts[building]['kWhperSqFt'];
		if (colorCounter%2==0){
			background = 'blank.png'; //just in case the need to have a real bg arises
			gradcolor1 = '#0065cd';
			gradcolor2 = '#0398da';
		}
		else {
			background = 'blank.png'; //same
			gradcolor1 = '#1f1f1f';
			gradcolor2 = '#515151';
		}
		innerHTMLstring += "<div style='min-height:50px;'><div class='comparisondiv' id='" + building + "' style='margin-bottom: 5px;-webkit-border-radius: 10px 10px 10px 10px;-moz-border-radius: 10px 10px 10px 10px;border-radius: 10px 10px 10px 10px;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);box-shadow: 0 1px 20px rgba(0,0,0,.55);padding-top: 5px;padding-left: 5px;background: #0000FF;background-image: url(\"/site-media/images/" + background + "\");background-image: url(\"/site-media/images/" + background + "\"), -webkit-gradient(linear, left top, left bottom, from(" + gradcolor1 + "), to(" + gradcolor2 + "));background-image: url(\"/site-media/images/" + background + "\"), -webkit-linear-gradient(top, " + gradcolor1 + ", " + gradcolor2 + ");background-image:    url(\"/site-media/images/" + background + "\"), -moz-linear-gradient(top, " + gradcolor1 + ", " + gradcolor2 + ");background-image:     url(\"/site-media/images/" + background + "\"), -ms-linear-gradient(top, " + gradcolor1 + ", " + gradcolor2 + ");background-image:      url(\"/site-media/images/" + background + "\"), -o-linear-gradient(top, " + gradcolor1 + ", " + gradcolor2 + ");background-image: url(\"/site-media/images/" + background + "\"), linear-gradient(top, " + gradcolor1 + ", " + gradcolor2 + ");height:" + djangoGenDsqfts[building]['SQFT']/vscaleFactor + "px;width:" + kwhPerSqft*hscaleFactor + "px;white-space:nowrap;overflow:show;'><h3 style='display:inline-block;color:#000000;background-color:rgba(255,255,255,0.5);-webkit-border-radius: 5px 5px 5px 5px;-moz-border-radius: 5px 5px 5px 5px;border-radius: 5px 5px 5px 5px;-webkit-box-shadow: 0 5px 40px rgba(0,0,0,.3);-moz-box-shadow: 0 5px 40px rgba(0,0,0,.3);box-shadow: 0 5px 40px rgba(0,0,0,.7);'>&nbsp;<a href='" + djangoGenDsqfts[building]['url'] + "'>" +  djangoGenDsqfts[building]['FullName'] + "</a> " + Math.round(kwhPerSqft*10000)/10000 + " kWh/SqFt x " + djangoGenDsqfts[building]['SQFT'] + " SqFt = " + djangoGenDsqfts[building]['Reading'] + " kWh Usage. &nbsp;</h3></div></div>"
	
	colorCounter++;
	}
	$("#bargraph").html(innerHTMLstring);
	$("#bargraph").fadeIn();
}

function sortNumber(a,b){
	return b-a;
}

function sortTesting(arr, sortBy){
	//adapted from http://www.latentmotion.com/how-to-sort-an-associative-array-object-in-javascript/
	// Setup Arrays
	var sortedKeys = new Array();
	var associations = { };
	var sortedObj = {};

	// Separate keys and sort them
	for (var i in arr){
		sortedKeys.push(arr[i][sortBy]);
		associations[arr[i][sortBy]] = i;
	}
	if (sortBy == 'Reading' || sortBy == 'SQFT' || sortBy == 'kWhperSqFt'){
		sortedKeys.sort(sortNumber);
	}
	else {
		sortedKeys.sort();
	}

	// Reconstruct sorted obj based on keys
	for (var i in sortedKeys){
		sortedObj[associations[sortedKeys[i]]] = arr[associations[sortedKeys[i]]];
	}
	return sortedObj;
}



</script>
{% endblock %}
